<template>
	<div class="vipcou">
		<h4>精选课程</h4>
		<ul>
			<li v-for="(v,i) in arr" :key="i">
				<img :src="v.img" />
				<h5>{{v.title}}</h5>
				<span class="piece">￥{{v.pirce}}</span>
				<span class="prepiece">{{v.prepirce}}</span>
				<span class="stu">{{v.stu}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arr: [
					{
						"img": "img/vipcou1.png",
						"title": "当你感到生活艰难时",
						"pirce": "0.66",
						"prepirce": "￥99",
						"stu": "38.7w人已学"
					},
					{
						"img": "img/vipcou2.png",
						"title": "货真价实的工作总结",
						"pirce": "1.99",
						"prepirce": "￥19.9",
						"stu": "38.7人已学"
					},
					{
						"img": "img/vipcourse3.png",
						"title": "Java入门到精通编程",
						"pirce": "1.99",
						"prepirce": "￥99",
						"stu": "3384人已学"
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.vipcou{
		h4{
			font-size: 0.18rem;
			padding: 0.2rem 0.15rem;
		}
		padding-bottom: 0.55rem;
		li{
			list-style: none;
			width: calc(100% - 0.3rem);
			margin-left: 0.15rem;
			height: 0.93rem;
			border-bottom: 1px solid #f8f8f8;
			background-color: #FFFFFF;
			position: relative;
			img{
				width: 1.13rem;
				height: 0.62rem;
				position: absolute;
				top: 0.15rem;
				left: 0.15rem;
			}
			h5{
				font-size: 0.15rem;
				position: absolute;
				top: 0.15rem;
				left: 1.36rem;
			}
			.piece,.prepiece,.stu{
				font-size: 0.12rem;
				position: absolute;
				bottom: 0.15rem;
			}
			.piece{
				color: #df0505;
				left: 1.36rem;
			}
			.prepiece{
				left: 1.8rem;
			}
			.stu{
				right: 0.15rem;
			}
		}
	}
</style>
